import { Timeline } from '@alifd/next';
import React from 'react';
import { DATETIME_TEXT } from '../stores/definitions';

const TimelineItem = Timeline.Item;

const LogTimeline = (props) => {
  const { title, width = '100%', dataSource } = props;
  return (
    <div style={{ width: `${width}`, textAlign: 'center' }}>
      <h2>{title}</h2>
      <Timeline style={{ width: '10%', margin: '0 auto' }}>
        {dataSource.map((logInfo, idx) => {
          const { title: logTitle, ts, id } = logInfo;
          return (
            <TimelineItem
              state={idx == 0 ? 'process' : 'done'}
              key={`${id}-${idx}`}
              title={logTitle}
              timeLeft={<span style={{ width: '200px', float: 'right' }}>{DATETIME_TEXT(ts)}</span>}
            />
          );
        })}
      </Timeline>
    </div>
  );
};

export default LogTimeline;
